<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>仿 select 的异步树形选择器 asynTreeSelect - layui 第三方组件平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="由于是异步，需求三个请求 获取本节点、获取子节点、获取兄弟节点 。">
    <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
    <link rel="stylesheet" href="/layui/dist/css/layui.css">
    <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
    <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
</head>
<body>
<div class="layui-header header header-extends" style="background-color: #24262F;">
    <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav">
            <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li>
            <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li>
            <li class="layui-nav-item"> <a href="javascript:;">周边</a>
                <dl class="layui-nav-child layui-nav-child-c">
                    <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a>
                    </dd>
                    <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a>
                        <hr>
                    </dd>
                </dl> </li>
        </ul>
    </div>
</div>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<div class="fly-extend-banner fly-extend-banner-sm">
    <div class="layui-carousel" id="FLY-extend-banner" data-height="200px">
        <div carousel-item>
            <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
                <div style="background: rgba(0,0,0,.6)"></div>
            </div>
        </div>
    </div>
    <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1>
    <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
    </div>
</div>
<div class="fly-extend-detail layui-card">
    <div class="layui-container">
        <div class="fly-extend-list-header"><h1 class="fly-extend-title layui-elip"><a>仿 select 的异步树形选择器</a> <span
                class="layui-badge layui-bg-green layui-hide-xs">asynTreeSelect</span></h1>
            <div class="fly-extend-list-info"><a href="/u/56131824" target="_blank" class="fly-extend-list-user"
                                                 title="发布者"> <cite class="layui-hide-xs">楼顶**葵</cite> <img
                    src="/images/fly/avatar/5.jpg" alt="楼顶**葵"> </a></div>
        </div>
        <blockquote class="fly-extend-list-desc layui-elem-quote"><p>由于是异步，需求三个请求 获取本节点、获取子节点、获取兄弟节点 。</p></blockquote>
        <div class="fly-extend-list-bottom"><span class="layui-inline">更新：2020-5-30 </span> <span class="layui-inline">创建：2020-4-26 </span>
            <div class="layui-btn-container layui-extend-doc-edit"></div>
        </div>
    </div>
</div>
<div class="layui-container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-sm3 layui-col-md2">
            <div class="layui-card">
                <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav">
                    <li class="layui-this" lay-id="doc"><a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a>
                    </li>
                    <li lay-id="download"><a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-col-sm9 layui-col-md10">
            <div class="layui-card fly-extend-doc layui-show">
                <div class="layui-card-header"><h3 class="layui-inline layui-this">文档</h3></div>
                <div class="layui-card-body detail-body photos layui-text"> 示例<br>1、定义标签<br>
                    <pre> &lt;input id=&quot;test&quot;  value=&quot;xxxx&quot; /&gt; &lt;!-- value 为默认值 --&gt;</pre>
                    2、初始化组件<br>
                    <pre>var $ = layui.$;<br><br>$(function(){<br>	layui.config({<br>		  base: &#39;${pageContext.request.contextPath}/js/layuiExtend&#39; //配置 layui 第三方扩展组件存放的基础目录<br>		}).extend({<br>			asynTreeSelect: &#39;/asynTreeSelect&#39;<br>		}).use([&#39;asynTreeSelect&#39;], function(){<br>		<br>		 <br>	  var asynTreeSelect = layui.asynTreeSelect;<br>	  <br>	  asynTreeSelect.render({<br>	    elem: &#39;#test&#39;<br>	    ,getCurrentNodeUrl:&quot;${pageContext.request.contextPath}/test/getRealmByParam1.action&quot; //根据paramName获取当前节点的请求<br>	    ,getChildrenNodeUrl:&quot;${pageContext.request.contextPath}/test/getRealmByParam1.action&quot; //根据paramName获取子节点的请求<br>	    ,getBrotherNodeUrl:&quot;${pageContext.request.contextPath}/test/getRealmByParam1.action&quot; //根据paramName获取兄弟节点的请求<br>	    ,paramName:&quot;currNodeId&quot; //请求后台带的参数，此处为区域id<br>	    ,paramType:&quot;postType&quot; //请求后台自带的参数，获取本节点时候 postType=1，获取子节点时候 postType=2,获取兄弟节点的时候该值为3<br>	                          //所以后台可以根据此值判断是发出什么请求，getCurrentNodeUrl、getChildrenNodeUrl、getBrotherNodeUrl请求都是同一个就行<br>	    ,rootNodeValue:&quot;44&quot;<br>	    //,defaultValue:&quot;440232&quot;<br>	    ,separator:&quot;/&quot;<br>	    ,showRootNode:true //是否显示根节点，默认true<br>	    //,maxWidth:400<br>	    ,response:{<br>       	     idName:&quot;REALM_ID&quot;<br>            ,valueName:&quot;REALM_NAME&quot;<br>            ,parentName:&quot;PARENT_ID&quot;<br>        }<br>	   /*    ,onlick:function(data){<br>	    	console.log(data)<br>	    }   */<br>	  });<br>	  <br>	  //三个请求返回数据的格式为 [{REALM_ID:&quot;4401&quot;,REALM_NAME:&quot;广州&quot;,PARENT_ID:&quot;44&quot;},{REALM_ID:&quot;4402&quot;,REALM_NAME:&quot;深圳&quot;,PARENT_ID:&quot;44&quot;}]<br>	});<br>	var form = layui.form;  <br>	 form.render();</pre>
                    3、截图<br><img src="/upload/2020_4/56131824_1587302717269_80560.gif"> <br><br>源码附java例子。请移步码云下载
                </div>
            </div>
            <div class="layui-card fly-extend-doc">
                <div class="layui-card-header"><h3 class="layui-inline layui-this">下载</h3></div>
                <div class="layui-card-body detail-body layui-text">
                    <div class="layui-btn-container"><a href="//cdn.layui.com/extend/56131824_1590821649568_41079.rar"
                                                        target="_blank"
                                                        class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a
                            href="https://gitee.com/yongdon/asynchronous_tree_selector" target="_blank"
                            class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a>
                        <blockquote class="layui-elem-quote"> 该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。</blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fly-footer"><p>Copyright &copy; 2021 <a href="/">layui.itmtr.cn</a> MIT Licensed</p>
</div>
<script src="/layui/dist/layui.js"></script>
<script>// common</script>

</body>
<script src="/common/common.js"></script>
</html>